<template>
	<view class="plan">
		<view class="item" v-for="(item, index) in list" :key="index" @click="onClick(item)">
			<view class="item-img">
				<image :src="item.avatar"></image>
			</view>
			<view class="item-info">
				<view class="item-name space-between">
					<view class="align-height row">
						<text class="name">{{item.name}}</text>
						<view class="tip" :class="level[item.level]">
							<text class="tip-icon yzb yzb-jiangli-"></text>
							<text class="tip-name">{{levelName[item.level]}}</text>
						</view>
					</view>
					<text class="price">¥<text class="number">{{item.price}}</text></text>
				</view>
				<text class="item-title">{{item.title}}</text>
				<text class="item-desc ellipsis-twoline">{{item.fields}}</text>
				<view class="space-between align-height">
					<view>
						<text class="number">{{item.serviceNum}}+</text>人咨询
						 · 从业<text class="number">{{item.serviceTime}}</text>年
					</view>
					<!-- <view class="item-loaction">
						<text class="yzb yzb-location"></text>
						<text class="city">{{item.city}}</text>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"yzb-plan",
		props: {
			list: Array
		},
		data() {
			return {
				level:[
					"level0",
					"level1",
					"level2",
				],
				levelName:[
					"新手",
					"成熟",
					"资深",
				],
			};
		},
		
		methods:{
			onClick(item) {
				this.$emit('click', item);
			},
		}
	}
</script>

<style lang="scss">
	
	.item{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20upx;
		border-bottom: 10upx solid #f8f8f8;
		
		.space-between{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
		
		.item-img{
			image{
				width: 160upx;
				height: 160upx;
				border-radius: 80upx;
			}
		}
		
		.item-info{
			margin-left: 20upx;
			width: 100%;
			
			.item-name{
				.name{
					font-weight: bold;
					font-size: 34upx;
				}
				
				.tip{
					margin-left: 10upx;
					border-radius: 10upx;
					padding: 0 10upx;
					height: 36upx;
					line-height: 36upx;
					text{
						font-size: 20upx;
					}
					.tip-name{
						margin-left: 3upx;
					}
				}
				.level2{
					background-color: #F4E290;
					text{
						color: #A67B22;
					}
				}
				.level1{
					background-color: #F1DDD0;
					text{
						color: #887765;
					}
				}
				.level0{
					background-color: #E5EAFE;
					text{
						color: #70829A;
					}
				}
				
				.price{
					font-weight: bold;
					color: #ff201f;
					font-size: 26upx;
					.number{
						color: #ff201f;
						font-size: 34upx;
					}
				}
			}
			
			.item-title{
				font-size: 28upx;
			}
			
			.item-desc{
				font-size: 28upx;
				color: #666;
				line-height: 1.4;
				padding: 5upx 0;
			}
			
			.item-loaction{
				text{
					font-size: 26upx;
					color: #666;
				}
				.city{
					margin-left: 5upx;
				}
			}
			
			.number{
				margin: 0 5upx;
				color: #000;
				font-weight: bold;
			}
		}
		
	}

</style>